import React, { Component,PropTypes} from 'react';
import {Link} from 'react-router';
import Top from '../CommonComponent/Top'
import {BankList} from '../../Action/auth';
import '../../Stylesheets/wx/recharge.css'
import Empty from '../CommonComponent/Empty'

export default class CommissionCash extends Component {
    // 构造
     constructor(props) {
         super(props);
         // 初始状态
         this.state = {
            bankList:[]
         };
     }

    static contextTypes = {
        router:PropTypes.object
    }

     componentWillMount() {
        this.getBankList()
     }

     async getBankList(){
         await BankList()
             .then(res=>{
                 this.setState({bankList:res})
             })
             .catch(err=>{
                 console.warn('err',err)
         })
     }

    //跳转页面,传参
    confirmBankCard(bankName,bankcardNo,id){
        this.context.router.push({pathname:'/withdrawCash',
            query:{toChange:true,bankname:bankName,bankcardNo:bankcardNo,bankcardId:id}})
    }

    render() {
        const {bankList} = this.state
        return (
            <div>
                <Top
                    title ={'选择提现账号'}
                />
                <div className="containerNav" style={{top:50,bottom:50}}>
                    {
                        bankList.length == 0?
                            <Empty />
                            :
                            bankList&&bankList.map(el=>{
                                return(
                                    <div
                                        className="ChooseHeight"
                                        onClick={()=>this.confirmBankCard(el.bankName,el.bankcardNo.substr(el.bankcardNo.length-4),el.id)}
                                    >
                                        <div style={{paddingLeft:20}} className="bankBg flex border_4 pa_top mt5 pa_bottom">
                                            <span className="di" style={{width:50,height:50}}><img src={require('../../Images/bank.png')} alt=""/></span>
                                            <div className="flex-1 colorfff f14 ml">
                                                <span className="di" style={{marginTop:2}}>{el.bankName}</span>
                                                <p style={{margin:0}}>储蓄卡</p>
                                                <div style={{marginTop:25}}>
                                                    <span>****</span>
                                                    <span className="di ml">****</span>
                                                    <span className="di ml">****</span>
                                                    <span className="di ml">{el.bankcardNo.substr(el.bankcardNo.length-4)}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                    }



                    <div className="footerHidden"></div>
                </div>
                {
                    bankList.length == 0?
                        <Link to="/bankInformation">
                            <div className="pf bottom0 tc userHeight width100 colorfff f16 bgk_lv">
                                添加银行卡
                            </div>
                        </Link>
                        :null

                }

            </div>
        );
    }
}
